<template>
  <div class="headBar" :class="$store.state.isCollapse?'position-collapse-left':'position-left'">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#fff"
      text-color="#000"
      active-text-color="#000"
    >
      <!-- 导航收缩按钮 -->
      <el-menu-item index="1" @click="changeCollapse" v-if="!isMobileFlag">
        <i class="iconfont icon-daohang"></i>
      </el-menu-item>
      <el-submenu index="2" class="avatar">
        <template slot="title">
          <span v-if="!isMobileFlag">{{userInfo.username}}</span>
          <img src="@/assets/avatar2.png" />
        </template>
        <el-menu-item index="2-1" @click="goUserInfo">用户信息</el-menu-item>
        <el-menu-item index="2-2" @click="logOut">注销</el-menu-item>
      </el-submenu>
      <el-menu-item class="message-box">
        <el-dropdown @command="goMessage">
          <span class="el-dropdown-link">
            <el-badge :value="messageNumber" :max="99" :hidden="messageNumber === 0" class="badge">
              <i class="iconfont icon-informatiom"></i>
            </el-badge>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in messageList" :key="index" :command="item.id">
              <p class="message-title">{{item.title}}</p>
              <p class="message-time">{{moment(item.createdAt).format('YYYY-MM-DD HH:mm')}}</p>
            </el-dropdown-item>
            <el-dropdown-item command="more">
              <p class="message-more">查看更多</p>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import moment from "moment";
import { setCookie } from "@/utils/cookie";
export default {
  name: "headBar",
  components: {},
  data() {
    return {
      moment: moment,
      messageList: [],
      messageNumber: 0,
      isMobileFlag: this.$utils.isMobile(),
      showMoney: true,
      param: {
        status: 1,
        pageNo: 1,
        pageSize: 5
      },
      userInfo: {}
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  watch: {
    user(val) {
      this.userInfo = val;
    }
  },
  mounted() {},
  methods: {
    goMessage(command) {
      console.log(command);
      if (command === "more") {
        this.$router.push({ path: "/person/message" });
      }
    },
    getUserInfo() {
      this.$api.user.GetUserInfo().then(res => {
        this.$store.commit("setUserInfo", res.data.userInfo);
        this.$message.success("刷新成功");
      });
    },
    goUserInfo() {
      this.$router.push({ path: "/person/info" });
    },
    logOut() {
      setCookie("token", "", 0);
      this.$message.success("注销成功");
      this.$router.push({ path: "/login" });
    },
    changeCollapse() {
      //改变导航栏状态
      this.$store.commit("changeCollapse");
    },
    getMessageList() {
      this.$api.user.pagingMessage(this.param).then(res => {
        this.messageList = res.data.list;
        this.messageNumber = res.data.total;
      });
    }
  },
  created() {
    this.getMessageList();
  }
};
</script>

<style lang="scss" scoped>
/* 改变主题色变量 */
$--color-primary: #409eff;
/* 改变 icon 字体路径变量，必需 */

.headBar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1020;
  transition: 0.3s;
  line-height: 64px;
  .el-menu {
    height: 64px;
    .el-menu-item {
      border: none;
      i {
        color: black;
      }
    }
    .message-box {
      padding: 0;
      float: right;
      .iconfont {
        margin: 0 20px;
        font-size: 30px;
      }
    }
    .avatar {
      float: right;
      span {
        color: black;
        font-size: 20px;
      }
      img {
        margin-left: 10px;
        border-radius: 5px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.position-left {
  left: 201px;
}
.position-collapse-left {
  left: 65px;
}
.el-dropdown-menu__item {
  + .el-dropdown-menu__item {
    border-top: 1px solid #dedede;
  }
  .message-title {
    width: 350px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-time {
    width: 350px;
    font-size: 14px;
    color: #9e9e9e;
  }
  .message-more {
    width: 350px;
    text-align: center;
  }
}
</style>